<template>
    <div class="main_item" v-for="(items,indexs) in list" :key="items.key">
      <router-link  :to='{name:"Shop",params: {id:items.id}}' class="router">
    <h3>{{items.key}}</h3>
    <ul class="main_ul" :ref="el=>{nodeUl[indexs]=el}">
      <li class="main_li" v-for="item in items.value" :key="item.name">
        <img :src="item.imgUrl" alt="">
        <div class="text"><p class="text_title">{{item.name}}</p><p class="text_price">¥{{item.price}} x {{item.sum}}</p></div>
        <p class="sum">￥{{Number((item.sum*item.price).toFixed(2))}}</p>
      </li>
    </ul>
    </router-link>
    <div class="main_item_weight" @click="openList(indexs)" >共计{{items.sum}}件/1.4kg&nbsp;&nbsp;<span class="iconfont" v-show="items.value.length>2" :ref='el=>{nodeSpan[indexs]=el}'>&#xeb15;</span></div>
    </div>
</template>

<script>
import { ref } from '@vue/reactivity'
const nodeUl = ref([])
const nodeSpan = ref([])
export default {
  name: 'SpgCartItem',
  props: ['list'],
  setup () {
    const openList = (indexs) => {
      const classUl = nodeUl.value[indexs].classList
      const classSpan = nodeSpan.value[indexs].classList
      // eslint-disable-next-line no-unused-expressions
      classUl.contains('none')
        ? (classUl.remove('none'), classSpan.remove('rotate'))
        : (classUl.add('none'), classSpan.add('rotate'))
    }
    return { openList, nodeUl, nodeSpan }
  }
}
</script>

<style lang='scss' scoped>
.main_item{
  background-color: #ffffff;
  padding: .16rem;
  margin-bottom: .16rem;
  border-radius: .04rem;
  h3{
    margin-top: 0;
    font-size: .16rem;
  }
}
.main_ul{
  max-height: 1.2838rem;
  overflow: hidden;
  transition: all .4s;
}
.main_li{
  display: flex;
  font-size: .14rem;
  margin-bottom: .16rem;
  position: relative;
  img{
    width: 46px;
    height: 46px;
  }
  p{
    margin: 0;
  }
  .text{
   padding: .02rem 0 .06rem .16rem;
      &_price{
        color: #E93B3B;
        margin-top: .08rem;
      }
  }
  .sum{
    position: absolute;
    right: 0;
    bottom: .04rem;
  }
}
.main_item_weight{
  box-sizing: border-box;
  width: 100%;
  height: .28rem;
  font-size: 14px;
  color: #999999;
  padding: 0 .16rem;
  background-color: #f5f5f5;
  text-align: center;
  line-height: .28rem;
  .iconfont{
    display: inline-block;
    transition: all .5s;
  }
}
.none{
  max-height: 10rem;
  overflow-y: auto;
  transition: all 1.5s;
}
.rotate{
  transform: rotate(180deg);
}
</style>
